<template>
    <div class="fullScreen bg-c-wh">
        <lot-header></lot-header>
        <description v-if="this.$store.state.lotPlayDesc"></description>
        <div class="tx-s-14">
            <!-- 期数、倒计时、历史数据 -->
            <lot-overview></lot-overview>
            <!-- 提示 -->
            <div class="flex-box flex-ac flex-pe pad-tb">
                <div class="iconSize-125 icon_prompt marg-03"></div>
                <div class="tx-s-14 tx-c-666 mar-r-5" @click="showDesc()">玩法提示</div>
            </div>
            <div v-if="lotData != null">
                <!-- 两面盘 -->
                <div class="scroll-lot top1" v-show="lotPlayIndex == 0">
                    <div class="title-lot">总和龙虎</div>
                    <lot-options :title="['', '']" :content="lmpCont" :odds="lotOdds.lmp"></lot-options>
                </div>
                <!-- 1至5球 -->
                <div class="scroll-lot top1" v-show="lotPlayIndex == 1">
                    <div v-for="(value, key) in c1d5Play" :key="key">
                        <div class="title-lot">{{ value }}</div>
                        <lot-options :circle="true" :title="[key, value]" :content="c0d9Cont" :odds="lotOdds.dyqddwq.sz0d9"></lot-options>
                        <lot-options class="mart" :title="[key, value]" :content="dxdsCont" :odds="lotOdds.dyqddwq"></lot-options>
                    </div>
                </div>
                <!-- 前中后 -->
                <div class="scroll-lot top1" v-show="lotPlayIndex == 2">
                    <div v-for="(value, key) in qzhPlay" :key="key">
                        <div class="title-lot">{{ value }}</div>
                        <lot-options :title="[key, value]" :content="qzhCont" :odds="lotOdds.qzh"></lot-options>
                    </div>
                </div>
                <!-- 一字组合 -->
                <div v-show="lotPlayIndex == 3">
                    <lot-cont-tab :title="['yzzh', '一字组合']" :tab="yzzhPlay"></lot-cont-tab>
                </div>
                <!-- 二字组合 -->
                <div v-show="lotPlayIndex == 4">
                    <lot-cont-tab :title="['ezzh', '二字组合']" :tab="qzhPlay"></lot-cont-tab>
                </div>
                <!-- 三字组合 -->
                <div v-show="lotPlayIndex == 5">
                    <lot-cont-tab :title="['szzh', '三字组合']" :tab="qzhPlay"></lot-cont-tab>
                </div>
                <!-- 二字定位 -->
                <div class="scroll-lot top1" v-show="lotPlayIndex == 6">
                    <div v-for="(value, key) in ezdwPlay" :key="key">
                        <div class="title-lot">{{ value }}</div>
                        <lot-options :circle="true" :title="[key, value]" :content="c0d9Cont" :odds="lotOdds.ezdw"></lot-options>
                    </div>
                </div>
                <!-- 三字定位 -->
                <div v-show="lotPlayIndex == 7">
                    <div class="flex-box tx-c tx-s-14 bg-c-g lineh">
                        <div class="flex-f1" v-for="(value, key) in qzhPlay" :key="key" :class="{
                            'circle-R tx-c-wh' : index == key
                        }" @click="togTab(key, value)">{{ value }}</div>
                    </div>
                    <div class="scroll-lot top2">
                        <div v-show="index == k" v-for="(v, k) in szdwPlay" :key="k">
                            <div v-for="(value, key) in v" :key="key">
                                <div class="title-lot">{{ value }}</div>
                                <lot-options 
                                    :circle="true" 
                                    :title="[key, value]" 
                                    :content="c0d9Cont" 
                                    :odds="$store.state.lotOdds.szdw" 
                                    :playType="key"
                                ></lot-options>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 组选三 -->
                <div v-show="lotPlayIndex == 8">
                    <lot-cont-tab :title="['zx3', '组选三']" :tab="qzhPlay"></lot-cont-tab>
                </div>
                <!-- 组选六 -->
                <div v-show="lotPlayIndex == 9">
                    <lot-cont-tab :title="['zx6', '组选六']" :tab="qzhPlay"></lot-cont-tab>
                </div>
                <!-- 跨度 -->
                <div v-show="lotPlayIndex == 10">
                    <lot-cont-tab :title="['kd', '跨度']" :tab="qzhPlay"></lot-cont-tab>
                </div>
                <!-- 和数 -->
                <div class="scroll-lot top1" v-show="lotPlayIndex == 11">
                    <div v-for="(value, key) in hsPlay" :key="key">
                        <div class="title-lot">{{ value }}</div>
                        <lot-options :title="[key, value]" :content="hsCont" :odds="lotOdds"
                        ></lot-options>
                    </div>
                </div>
            </div>
        </div>
        <!-- footer -->
        <div class="flex-box flex-pj lotteryFooter tx-s-14">
            <div class="tx-c-r bor-r-g footer-btn" @click="cancel">重置</div>
            <div class="flex-box flex-f1">
                <input v-model="money" class="input-ol-n wd-fh tx-c" type="number" placeholder="请输入单注金额" />
            </div>
            <div class="tx-c-g bor-l-g footer-btn" @click="confirm">确定</div>
        </div> 
    </div>
</template>

<script type="text/ecmascript-6">
import 'common/css/lottery.css'
import { mapGetters } from 'vuex'
import { isEmptyObject } from '../../../common/js/common'
import Trans from '../../../common/js/eventTrans'
import LotHeader from "../../../components/lottery/lot-header"
import description from "../../../components/lottery/description"
import LotOverview from "../../../components/lottery/lotOverview"
import LotContTab from "../../../components/lottery/lotContTab"
import LotOptions from "../../../components/lottery/lotOptions"
import { lmpCont, c1d5Play, c0d9Cont, dxdsCont, qzhPlay, qzhCont, yzzhPlay, ezdwPlay, szdwPlay, hsPlay, hsCont } from '../../../common/js/data'
export default {
    data () {
        return {
            money : '',
            index : 'q3', // 前中后tab
            lmpCont : lmpCont, // 两面盘
            c1d5Play : c1d5Play, // 1至5球玩法
            c0d9Cont : c0d9Cont, // 1至5球内容
            dxdsCont : dxdsCont, // 1至5球内容
            qzhPlay : qzhPlay, // 前中后玩法
            qzhCont : qzhCont, // 前中后内容
            yzzhPlay : yzzhPlay, // 一字组合玩法
            ezdwPlay : ezdwPlay, // 二字定位玩法
            szdwPlay : szdwPlay, // 三字定位玩法
            hsPlay : hsPlay, // 和数玩法
            hsCont : hsCont // 和数内容
        }
    },
    mounted () {
        var _this = this
        Trans.$on('togLotteryTab', function (msg) {
            _this.cancel()
        })
    },
    methods: {
        // 重置，清空所有操作
        cancel () { 
            this.money = ''
            this.$store.state.lotOptions = []
            this.$store.state.lotSelData = []
        },
        // 三字定位前中后tab切换
        togTab (key, value) {
            this.index = key
            this.$store.state.qzhIndex = key
            this.playType = key + '_szdw'
            // 重置下注数据
            this.$store.state.lotOptions = []
            this.$store.state.lotSelData = []
        },
        // 确定
        confirm () {
            const {lotStatus} = this.$store.state
            const {lotSelData} = this.$store.state
            const {lotPlayIndex} = this.$store.state
            if(lotStatus == 0){
                this.$alert('已封盘')
            }else if(lotStatus == -1){ 
                this.$alert('已关盘')
            }else if(isEmptyObject(lotSelData)){
                this.$toast('未下注', 2000)
            }else if(lotStatus == 1){
                if(lotPlayIndex == 6){ // 二字定位
                    this.permutationE(lotSelData)
                }else if(lotPlayIndex == 7){ // 三字定位
                    this.permutationS(lotSelData)
                }else{
                    this.openOrder()
                }
            }
        },
        // 二字定位数据分类
        permutationE (data) {
            let ezdw = {w : [], q : [], b : [], s : [], g : []}
            let arr = []
            // 选中数据按照个十百千万分组
            for(let i=0; i<data.length; i++){
                ezdw[data[i].playType].push(data[i])
                if(arr.indexOf(data[i].playType)<0){
                    arr.push(data[i].playType)
                }
            }
            if(arr.length > 1){
                this.$store.state.lotSelData = []
                if(ezdw.w.length>0 && ezdw.q.length>0){// 万千
                    this.ezdwData(ezdw.w, ezdw.q)
                }
                if(ezdw.w.length>0 && ezdw.b.length>0){// 万百
                    this.ezdwData(ezdw.w, ezdw.b)
                }
                if(ezdw.w.length>0 && ezdw.s.length>0){// 万十
                    this.ezdwData(ezdw.w, ezdw.s)
                }
                if(ezdw.w.length>0 && ezdw.g.length>0){// 万个
                    this.ezdwData(ezdw.w, ezdw.g)
                }
                if(ezdw.q.length>0 && ezdw.b.length>0){// 千百
                    this.ezdwData(ezdw.q, ezdw.b)
                }
                if(ezdw.q.length>0 && ezdw.s.length>0){// 千十
                    this.ezdwData(ezdw.q, ezdw.s)
                }
                if(ezdw.q.length>0 && ezdw.g.length>0){// 千个
                    this.ezdwData(ezdw.q, ezdw.g)
                }
                if(ezdw.b.length>0 && ezdw.s.length>0){// 百十
                    this.ezdwData(ezdw.b, ezdw.s)
                }
                if(ezdw.b.length>0 && ezdw.g.length>0){// 百个
                    this.ezdwData(ezdw.b, ezdw.g)
                }
                if(ezdw.s.length>0 && ezdw.g.length>0){// 十个
                    this.ezdwData(ezdw.s, ezdw.g)
                }
                this.openOrder()
            }else{
                this.$toast('请至少选择两位的数投注', 2000)
            }
        },
        // 二字定位数据组合
        ezdwData (d1, d2) {
            let reData = []
            for(let a=0; a<d1.length; a++){
                for(let b=0; b<d2.length; b++){
                    const playType = d1[a].playType + d2[b].playType + '_ezdw'
                    const cont = d1[a].content + ',' + d2[b].content
                    const name = d1[a].name + ' ' + d2[b].name
                    let selObj = {
                        'playType' : playType,
                        'content' : cont,
                        'odds' : d2[b].odds,
                        'name' : name,
                        'issue' : this.lotData.countDown.issue
                    }
                    reData.push(selObj)
                }
            }
            this.$store.state.lotSelData = this.$store.state.lotSelData.concat(reData)
        },
        // 三字定位数据分类
        permutationS (data) {
            const {qzhIndex} = this.$store.state
            const paly = qzhIndex + '_szdw'
            let szdw = {}
            if(qzhIndex == 'q3'){ // 前三 万千百
                szdw = {w : [], q : [], b : []}
                for(let i=0; i<data.length; i++){
                    szdw[data[i].playType].push(data[i])
                }
                this.szdwData(szdw.w, szdw.q, szdw.b, paly)
            }else if(qzhIndex == 'z3'){ // 中三 千百十
                szdw = {q : [], b : [], s : []}
                for(let i=0; i<data.length; i++){
                    szdw[data[i].playType].push(data[i])
                }
                this.szdwData(szdw.q, szdw.b, szdw.s, paly)
            }else{ // 后三 百十个
                szdw = {b : [], s : [], g : []}
                for(let i=0; i<data.length; i++){
                    szdw[data[i].playType].push(data[i])
                }
                this.szdwData(szdw.b, szdw.s, szdw.g, paly)
            }
        },
        // 三字定位数据组合
        szdwData (d1, d2, d3, playType) {
            if(d1.length>0 && d2.length>0 && d3.length>0){
                let reData = []
                for(let a=0; a<d1.length; a++){
                    for(let b=0; b<d2.length; b++){
                        for(let c=0; c<d3.length; c++){
                            const cont = d1[a].content + ',' + d2[b].content + ',' + d3[c].content
                            const name = d1[a].name + ' ' + d2[b].name + ' ' + d3[c].name
                            let selObj = {
                                'playType' : playType,
                                'content' : cont,
                                'odds' : d3[c].odds,
                                'name' : name,
                                'issue' : this.lotData.countDown.issue
                            }
                            reData.push(selObj)
                        }
                    }
                }
                this.$store.state.lotSelData = reData
                this.openOrder()
            }else{
                this.$toast('每位至少选择一个数投注', 2000)
            }
        },
        // 打开订单页面
        openOrder () {
            this.$store.state.qzhIndex = 'q3' // 重置三字定位前中后标识
            this.$router.push({
                path: '/lotteryOrder',
                query: {
                    inputPrice : this.money || this.lotData.min,
                    payPriceMin : this.lotData.min,
                    payPriceMax : this.lotData.max
                }
            })
        },
        // 打开玩法提示
        showDesc () {
            this.$store.state.lotPlayDesc = true
        }
    },
    components: {
        LotHeader,
        description,
        LotOverview,
        LotOptions,
        LotContTab
    },
    computed: {
        ...mapGetters([
            'lotData',
            'lotOdds',
            'lotPlayIndex'
        ])
    }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    .scroll-lot
        position : fixed
        bottom : 3.25rem
        width : 96%
        margin : 0 2%
        overflow: auto
    .scroll-lot::-webkit-scrollbar
        display : none
    .top1
        top : 9.25rem
    .top2
        top : 11.25rem
    .lineh
        line-height : 2rem
        margin : 0 2%
    .mart
        margin-top : -.75rem
</style> 